<template>
  <div class="chart_container">
    <!-- 标题 -->
    <p class="title">
      <i class="el-icon-pie-chart"></i> 数据可视化
    </p>
    <el-divider></el-divider>

    <el-form :inline="true" class="user-search">
      <!-- <span class="demonstration"></span>
      <el-date-picker
        v-model="startdate"
        type="date"
        placeholder="一周前"
        :picker-options="pickerOptions"
      ></el-date-picker>

      <span class="demonstration"></span>
      <el-date-picker
        v-model="enddate"
        align="right"
        type="date"
        placeholder="今天"
        :picker-options="pickerOptions"
      ></el-date-picker>-->

      <el-form-item>
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          value-format="yyyy-MM-dd"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="SearchDonor">查看期间捐赠物资</el-button>
        <el-button size="small" type="primary" icon="el-icon-search" @click="SearchRece">查看期间发放物资</el-button>
      </el-form-item>
    </el-form>

    <div id="container1" class="wide" style="width: 1500px ; height: 400px;">
      <!-- <canvas id="myChart3" width="1500px" height="400px" > </canvas>  -->
    </div>
    <div
      id="container2"
      class="small1"
      style="display:inline-block ; width : 1000px; height : 500px"
    >
      <!-- <canvas id="myChart1" width="1000px" height="500px" ></canvas>  -->
    </div>
    <div
      id="container3"
      class="small2"
      style="display:inline-block ; width : 500px; height : 500px"
    >
      <!-- <canvas id="myChart2" width="500px" height="500px" ></canvas>  -->
    </div>
  </div>
</template>



<script>
import Chart from "chart.js";

var i;

export default {
  data() {
    return {
      // 以下全为日历的数据，无需后端更改？
      // pickerOptions: {
      //   disabledDate(time) {
      //     return time.getTime() > Date.now();
      //   },
      //   shortcuts: [
      //     {
      //       text: "今天",
      //       onClick(picker) {
      //         picker.$emit("pick", new Date());
      //       },
      //     },
      //     {
      //       text: "昨天",
      //       onClick(picker) {
      //         const date = new Date();
      //         date.setTime(date.getTime() - 3600 * 1000 * 24);
      //         picker.$emit("pick", date);
      //       },
      //     },
      //     {
      //       text: "一周前",
      //       onClick(picker) {
      //         const date = new Date();
      //         date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
      //         picker.$emit("pick", date);
      //       },
      //     },
      //   ],
      // },

      dateRange: "", // 时间间隔测试
      startdate: "", //初始时间
      enddate: "", //最后时间
      // nowtime: "", //当前时间

      //以下为画布参数
      canvasid1: "",
      camvasid2: "",
      canvasid3: "",
      mychart1: "",
      mychart2: "",
      mychart3: "",
      ctx1: "",
      ctx2: "",
      ctx3: "",
      myChart1: "",
      myChart2: "",
      myChart3: "",

      receiptItemNum: {
        //每天不同类型物品数量（收到捐赠）所选时间内
        Protection: [], //防护类
        Disinfection: [], //消毒类
        Drugs: [], //药物类
        Diagnosis: [], //诊断类
        Others: [], //其它
      },

      distributionItemNum: {
        //每天不同类型物品数量（分配发放）所选时间内
        Protection: [], //防护类
        Disinfection: [], //消毒类
        Drugs: [], //药物类
        Diagnosis: [], //诊断类
        Others: [], //其它
      },

      // 默认当前查找的是捐赠物资
      isSearchReceipt: true,
    };
  },
  created() {
    // 默认日期赋值
    const start = new Date();
    const end = new Date();
    start.setTime(end.getTime() - 3600 * 1000 * 24 * 6);
    console.log(start.toISOString());
    console.log(end.toISOString());
    this.dateRange = [
      start.toISOString().substring(0, 10),
      end.toISOString().substring(0, 10),
    ];
  },
  mounted() {
    //画布定义
    this.canvasid1 = document.getElementById("container2");
    this.mychart1 = document.createElement("canvas");
    this.canvasid1.appendChild(this.mychart1);
    this.mychart1.width = 1000;
    this.mychart1.height = 500;

    this.canvasid2 = document.getElementById("container3");
    this.mychart2 = document.createElement("canvas");
    this.canvasid2.appendChild(this.mychart2);
    this.mychart2.width = 500;
    this.mychart2.height = 500;

    this.canvasid3 = document.getElementById("container1");
    this.mychart3 = document.createElement("canvas");
    this.canvasid3.appendChild(this.mychart3);
    this.mychart3.width = 1500;
    this.mychart3.height = 400;

    this.ctx1 = this.mychart1.getContext("2d");
    this.ctx2 = this.mychart2.getContext("2d");
    this.ctx3 = this.mychart3.getContext("2d");

    // console.log('before chart 1 8888888');
    // console.log("Mounted: " + this.startdate + ' ' + this.enddate);

    // this.GetDonorData(); // (因为watch的存在 所以似乎没有必要) 从后端获取最近七天的数据

    // console.log('before chart 2');

    // this.receiptItemNum

    //默认画最近七天表
    // var HowManyDaysWeek = 7; //从初始日期到结束日期多少天（包括首尾）
    // this.nowtime = new Date();

    //测试数据
    // this.receiptItemNum.Protection = [1, 2, 5, 3, 6, 4, 7];
    // this.receiptItemNum.Disinfection = [5, 6, 8, 9, 7, 8, 2];
    // this.receiptItemNum.Drugs = [15, 2, 6, 4, 10, 2, 6];
    // this.receiptItemNum.Diagnosis = [1, 2, 3, 7, 9, 5, 1];
    // this.receiptItemNum.Other = [5, 6, 8, 7, 9, 4, 2];

    let dateLen = this.receiptItemNum.Protection.length;

    var WeekPro = 0,
      WeekDis = 0,
      WeekDru = 0,
      WeekDia = 0,
      WeekOth = 0; //总数

    for (i = 0; i < dateLen; i++) {
      //累加
      WeekPro += this.receiptItemNum.Protection[i];
      WeekDis += this.receiptItemNum.Disinfection[i];
      WeekDru += this.receiptItemNum.Drugs[i];
      WeekDia += this.receiptItemNum.Diagnosis[i];
      WeekOth += this.receiptItemNum.Others[i];
    }

    var DateLabel1 = "获得捐赠物资种类及数量";
    var DateLabel2 = "捐赠物资种类及数量及其比例";

    var ItemTypeWeek = {
      //最近七天获得捐赠的物资的种类及数量
      TypeName: ["防护类", "消毒类", "药品类", "诊断类", "其他"],
      ItemNum: [WeekPro, WeekDis, WeekDru, WeekDia, WeekOth],
    };

    // console.log(ItemTypeWeek);
    // console.log(ItemTypeWeek.ItemNum);
    // console.log(ItemTypeWeek.TypeName);

    // console.log('before chart1');

    //条形图绘制
    // eslint-disable-next-line no-unused-vars

    this.myChart1 = new Chart(this.ctx1, {
      type: "bar", //类型：条形图
      data: {
        labels: ItemTypeWeek.TypeName, //添加标签（x轴）
        datasets: [
          {
            label: DateLabel1, //数据集标签
            data: ItemTypeWeek.ItemNum, //数据（y轴）
            backgroundColor: [
              //条形颜色
              "rgba(255, 99, 132, 0.2)",
              "rgba(54, 162, 235, 0.2)",
              "rgba(255, 206, 86, 0.2)",
              "rgba(75, 192, 192, 0.2)",
              "rgba(153, 102, 255, 0.2)",
            ],
            borderColor: [
              //边框颜色
              "rgba(255,99,132,0.5)",
              "rgba(54, 162, 235, 0.5)",
              "rgba(255, 206, 86, 0.5)",
              "rgba(75, 192, 192, 0.5)",
              "rgba(153, 102, 255, 0.5)",
            ],
            hoverBackgroundColor: [
              //悬浮颜色
              "rgba(255,99,132,1)",
              "rgba(54, 162, 235, 1)",
              "rgba(255, 206, 86, 1)",
              "rgba(75, 192, 192, 1)",
              "rgba(153, 102, 255, 1)",
            ],
            borderWidth: 2, //边框
          },
        ],
      },
      options: {
        scales: {
          yAxes: [
            {
              //y轴
              ticks: {
                beginAtZero: true,
              },
              scaleLabel: {
                display: true,
                labelString: "物资数量",
              },
            },
          ],
          xAxes: [
            {
              //x轴
              scaleLabel: {
                display: true,
                labelString: "物资种类",
              },
            },
          ],
        },
      },
    });

    //扇形图绘制
    // eslint-disable-next-line no-unused-vars
    this.myChart2 = new Chart(this.ctx2, {
      type: "polarArea", //类型：扇形图
      data: {
        labels: ItemTypeWeek.TypeName, //添加标签（扇形个数）
        datasets: [
          {
            label: DateLabel2, //数据集标签
            data: ItemTypeWeek.ItemNum, //数据（扇形面积及其比例来源）
            backgroundColor: [
              //扇形颜色
              "rgba(255, 99, 132, 0.2)",
              "rgba(54, 162, 235, 0.2)",
              "rgba(255, 206, 86, 0.2)",
              "rgba(75, 192, 192, 0.2)",
              "rgba(153, 102, 255, 0.2)",
            ],
            borderColor: [
              //边框颜色
              "rgba(255,99,132,0.5)",
              "rgba(54, 162, 235, 0.5)",
              "rgba(255, 206, 86, 0.5)",
              "rgba(75, 192, 192, 0.5)",
              "rgba(153, 102, 255, 0.5)",
            ],
            hoverBackgroundColor: [
              //悬浮颜色
              "rgba(255,99,132,1)",
              "rgba(54, 162, 235, 1)",
              "rgba(255, 206, 86, 1)",
              "rgba(75, 192, 192, 1)",
              "rgba(153, 102, 255, 1)",
            ],
            borderWidth: 2, //边框
          },
        ],
      },
    });

    //初始化折线图参数
    var LabelTime = []; //从开始日期到结束日期，每天

    var Day = new Date(); //获得当日日期
    var start = new Date();
    start.setTime(Day.getTime() - 3600 * 1000 * 24 * 6);
    LabelTime = this.dateArray(start.toISOString().substring(0, 10), Day.toISOString().substring(0, 10));
    // for (i = dateLen - 1; i >= 0; i--) {
    //   //将最近七天的日期存入一个数组内
    //   // LabelTime[i] = this.dateformat(Day);
    //   LabelTime[i] = Day.toISOString().substring(0, 10);
    //   Day.setDate(Day.getDate() - 1);
    // }

    //绘制折线图
    // eslint-disable-next-line no-unused-vars
    this.myChart3 = new Chart(this.ctx3, {
      type: "line",
      data: {
        labels: LabelTime, //x轴
        datasets: [
          {
            label: ItemTypeWeek.TypeName[0], //数据集标签（防护类）
            data: this.receiptItemNum.Protection, //数据（y轴）
            backgroundColor: "rgba(255, 99, 132, 0.2)",
            borderColor: "rgba(255, 99, 132, 0.5)",
            borderWidth: 2,
            borderCapStyle: "round",
            borderJoinStyle: "round",
            pointBorderWidth: 3,
            pointHoverBorderColor: "rgba(255, 99, 132, 1)",
          },
          {
            label: ItemTypeWeek.TypeName[1], //数据集标签（消毒类）
            data: this.receiptItemNum.Disinfection, //数据（y轴）
            backgroundColor: "rgba(54, 162, 235, 0.2)",
            borderColor: "rgba(54, 162, 235, 0.5)",
            borderWidth: 2,
            borderCapStyle: "round",
            borderJoinStyle: "round",
            pointBorderWidth: 3,
            pointHoverBorderColor: "rgba(54, 162, 235, 1)",
          },
          {
            label: ItemTypeWeek.TypeName[2], //数据集标签（药物类）
            data: this.receiptItemNum.Drugs, //数据（y轴）
            backgroundColor: "rgba(255, 206, 86, 0.2)",
            borderColor: "rgba(255, 206, 86, 0.5)",
            borderWidth: 2,
            borderCapStyle: "round",
            borderJoinStyle: "round",
            pointBorderWidth: 3,
            pointHoverBorderColor: "rgba(255, 206, 86, 1)",
          },
          {
            label: ItemTypeWeek.TypeName[3], //数据集标签（诊断类）
            data: this.receiptItemNum.Diagnosis, //数据（y轴）
            backgroundColor: "rgba(75, 192, 192, 0.2)",
            borderColor: "rgba(75, 192, 192, 0.5)",
            borderWidth: 2,
            borderCapStyle: "round",
            borderJoinStyle: "round",
            pointBorderWidth: 3,
            pointHoverBorderColor: "rgba(75, 192, 192, 1)",
          },
          {
            label: ItemTypeWeek.TypeName[4], //数据集标签（其它）
            data: this.receiptItemNum.Others, //数据（y轴）
            backgroundColor: "rgba(153, 102, 255, 0.2)",
            borderColor: "rgba(153, 102, 255, 0.5)",
            borderWidth: 2,
            borderCapStyle: "round",
            borderJoinStyle: "round",
            pointBorderWidth: 3,
            pointHoverBorderColor: "rgba(153, 102, 255, 1)",
          },
        ],
      },
      options: {
        scales: {
          yAxes: [
            {
              ticks: {
                beginAtZero: true,
              },
              scaleLabel: {
                display: true,
                labelString: "物资数量",
              },
            },
          ],
          xAxes: [
            {
              scaleLabel: {
                display: true,
                labelString: "日期",
              },
            },
          ],
        },
      },
    });
  },

  methods: {
    SearchDonor: async function() {
      // console.log('At SearchDonor');
      this.isSearchReceipt = true;
      // console.log(this.dateRange);
      // console.log(typeof this.dateRange[0]);
      // console.log(JSON.stringify(this.dateRange));

      await this.GetDonorData(); // 从后端获得所选时间 每天 获得捐赠 不同种类物资 的数量
      // //测试数据
      // this.receiptItemNum.Protection = [5,7,9,7,4,2,3];
      // this.receiptItemNum.Disinfection = [7,8,9,5,1,2,3];
      // this.receiptItemNum.Drugs = [5,6,8,9,4,2,1];
      // this.receiptItemNum.Diagnosis = [5,6,4,7,8,2,3];
      // this.receiptItemNum.Other = [3,1,2,4,7,8,2];

      var HowManyDaysDonor =
        (new Date(this.enddate) - new Date(this.startdate)) /
          (1000 * 60 * 60 * 24) +
        1; //从初始日期到结束日期多少天（包括首尾）

      var DonorPro = 0,
        DonorDis = 0,
        DonorDru = 0,
        DonorDia = 0,
        DonorOth = 0;

      console.log('this.receiptItemNum: ' + JSON.stringify(this.receiptItemNum));
      for (i = 0; i < HowManyDaysDonor; i++) {
        //累加所有数据
        DonorPro += this.receiptItemNum.Protection[i];
        DonorDis += this.receiptItemNum.Disinfection[i];
        DonorDru += this.receiptItemNum.Drugs[i];
        DonorDia += this.receiptItemNum.Diagnosis[i];
        DonorOth += this.receiptItemNum.Others[i];
      }

      var firsttime = this.dateformat(new Date(this.startdate)); //将初始时间转化为字符串
      var secondtime = this.dateformat(new Date(this.enddate)); //将结束时间转化为字符串

      var DateLabel1 =
        "从" + firsttime + "到" + secondtime + "获得捐赠物资种类及数量";
      var DateLabel2 =
        "从" + firsttime + "到" + secondtime + "获得捐赠物资种类及数量及其比例";

      var ItemTypeDonor = {
        // 捐赠物资的种类及其数量
        TypeName: ["防护类", "消毒类", "药品类", "诊断类", "其他"],
        ItemNum: [DonorPro, DonorDis, DonorDru, DonorDia, DonorOth],
      };
      

      // console.log('dataset[0]' + JSON.stringify(this.myChart1.data.datasets[0]));
      // 条形图 更新 捐赠模式
      this.myChart1.data.datasets[0].label = DateLabel1;
      this.myChart1.data.datasets[0].data = ItemTypeDonor.ItemNum;
      console.log('ItemTypeDonor: ' + JSON.stringify(ItemTypeDonor));
      console.log('this.myChart1.data.datasets[0].label: ' + this.myChart1.data.datasets[0].label);
      console.log('this.myChart1.data.datasets[0].data: ' + this.myChart1.data.datasets[0].data);
      this.myChart1.update();

      console.log('~~~ after update');
      // 扇形图 更新 捐赠模式
      this.myChart2.data.datasets[0].label = DateLabel2;
      this.myChart2.data.datasets[0].data = ItemTypeDonor.ItemNum;
      this.myChart2.update();

      // 初始化折线图的数据
      var LabelTime = [""]; //从开始日期到结束日期，每天

      var Day = new Date(this.startdate); //初始日期
      for (i = 0; i < HowManyDaysDonor; i++) {
        //把从初始日期到结束日期之间的日期（包括这两天）放在一个数组里
        LabelTime[i] = this.dateformat(Day);
        Day.setDate(Day.getDate() + 1);
      }

      this.myChart3.data.labels = LabelTime;

      // 折线图 更新 捐赠模式
      this.myChart3.data.datasets[0].label = ItemTypeDonor.TypeName[0];
      this.myChart3.data.datasets[0].data = this.receiptItemNum.Protection;

      this.myChart3.data.datasets[1].label = ItemTypeDonor.TypeName[1];
      this.myChart3.data.datasets[1].data = this.receiptItemNum.Disinfection;

      this.myChart3.data.datasets[2].label = ItemTypeDonor.TypeName[2];
      this.myChart3.data.datasets[2].data = this.receiptItemNum.Drugs;

      this.myChart3.data.datasets[3].label = ItemTypeDonor.TypeName[3];
      this.myChart3.data.datasets[3].data = this.receiptItemNum.Diagnosis;

      this.myChart3.data.datasets[4].label = ItemTypeDonor.TypeName[4];
      this.myChart3.data.datasets[4].data = this.receiptItemNum.Others;

      this.myChart3.update();
    },

    SearchRece: async function() {
      this.isSearchReceipt = false;
      await this.GetReceData(); // 从后端获得所选时间 每天 分配发放 不同种类物资 的数量

      var HowManyDaysRece =
        (new Date(this.enddate) - new Date(this.startdate)) /
          (1000 * 60 * 60 * 24) +
        1; //从初始日期到结束日期多少天（包括首尾）

      // //测试数据
      // this.distributionItemNum.Protection = [5,7,8,4,2,3,1];
      // this.distributionItemNum.Disinfection = [9,8,7,1,2,3,4];
      // this.distributionItemNum.Drugs = [10,7,8,1,2,0,1];
      // this.distributionItemNum.Diagnosis = [1,5,3,1,2,0,4];
      // this.distributionItemNum.Other = [10,1,2,4,7,8,9];

      var RecePro = 0,
        ReceDis = 0,
        ReceDru = 0,
        ReceDia = 0,
        ReceOth = 0;

      for (i = 0; i < HowManyDaysRece; i++) {
        //累加所有数据
        RecePro += this.distributionItemNum.Protection[i];
        ReceDis += this.distributionItemNum.Disinfection[i];
        ReceDru += this.distributionItemNum.Drugs[i];
        ReceDia += this.distributionItemNum.Diagnosis[i];
        ReceOth += this.distributionItemNum.Others[i];
      }

      var firsttime = this.dateformat(new Date(this.startdate)); // 将开始时间转化为字符串类型
      var secondtime = this.dateformat(new Date(this.enddate)); // 将结束时间转换为字符串类型

      var DateLabel1 =
        "从" + firsttime + "到" + secondtime + "分配发放物资种类及数量";
      var DateLabel2 =
        "从" + firsttime + "到" + secondtime + "分配发放物资种类及数量及其比例";

      var ItemTypeRece = {
        // 分配物资的种类及其数量
        TypeName: ["防护类", "消毒类", "药品类", "诊断类", "其他"],
        ItemNum: [RecePro, ReceDis, ReceDru, ReceDia, ReceOth],
      };

      // 条形图 更新 分配模式
      this.myChart1.data.datasets[0].label = DateLabel1;
      this.myChart1.data.datasets[0].data = ItemTypeRece.ItemNum;
      this.myChart1.update();

      // 扇形图 更新 分配模式
      this.myChart2.data.datasets[0].label = DateLabel2;
      this.myChart2.data.datasets[0].data = ItemTypeRece.ItemNum;
      this.myChart2.update();

      //折线图数据初始化
      var LabelTime = [""]; //从开始日期到结束日期，每天

      var Day = new Date(this.startdate); //开始日期
      for (i = 0; i < HowManyDaysRece; i++) {
        //从开始日期到结束日期时间放到一个数组里
        LabelTime[i] = this.dateformat(Day);
        Day.setDate(Day.getDate() + 1);
      }

      this.myChart3.data.labels = LabelTime;

      // 折线图 更新 分配模式
      this.myChart3.data.datasets[0].label = ItemTypeRece.TypeName[0];
      this.myChart3.data.datasets[0].data = this.distributionItemNum.Protection;

      this.myChart3.data.datasets[1].label = ItemTypeRece.TypeName[1];
      this.myChart3.data.datasets[1].data = this.distributionItemNum.Disinfection;

      this.myChart3.data.datasets[2].label = ItemTypeRece.TypeName[2];
      this.myChart3.data.datasets[2].data = this.distributionItemNum.Drugs;

      this.myChart3.data.datasets[3].label = ItemTypeRece.TypeName[3];
      this.myChart3.data.datasets[3].data = this.distributionItemNum.Diagnosis;

      this.myChart3.data.datasets[4].label = ItemTypeRece.TypeName[4];
      this.myChart3.data.datasets[4].data = this.distributionItemNum.Others;

      this.myChart3.update();
    },

    GetDonorData: async function() {
      //用作接收物资的图表数据
      console.log('At GetDonorDate: ' + this.startdate + ' ' + this.enddate);
      const dateRangeArray = this.dateArray(this.startdate, this.enddate);
      console.log('dataRangeArray: ' + JSON.stringify(dateRangeArray));
      await this.axios
        .post("/chart/receipt", JSON.stringify(dateRangeArray))
        .then((response) => {
          if (response.status === 200) {
            console.log('GetDonorData: ' + JSON.stringify(response.data));
            //从初始日期到结束日期，每天每种物资的数量（获得捐赠）包括首尾
            this.receiptItemNum.Protection = response.data.Protection; //每天防护类用品的数量（数组）
            this.receiptItemNum.Disinfection = response.data.Disinfection; //每天消毒类用品的数量（数组）
            this.receiptItemNum.Drugs = response.data.Drugs; //每天药物类用品的数量（数组）
            this.receiptItemNum.Diagnosis = response.data.Diagnosis; //每天诊断类用品的数量（数组）
            this.receiptItemNum.Others = response.data.Others; //每天其它用品的数量（数组）
          } else {
            console.log('不是200: ' + response.data);
          }
        })
        .catch((error) => {
          this.$message({
            message: "无法获取表格信息",
            type: "error",
          });
          console.error(error);
        });
    },

    GetReceData: async function() {
      const dateRangeArray = this.dateArray(this.startdate, this.enddate);
      //用作分配物资的图表数据
      await this.axios
        .post("/chart/distribution", JSON.stringify(dateRangeArray))
        .then((response) => {
          if (response.status === 200) {
            //从初始日期到结束日期，每天每种物资的数量（分配发放）包括首尾
            this.distributionItemNum.Protection = response.data.Protection; //每天防护类用品的数量（数组）
            this.distributionItemNum.Disinfection = response.data.Disinfection; //每天消毒类用品的数量（数组）
            this.distributionItemNum.Drugs = response.data.Drugs; //每天药物类用品的数量（数组）
            this.distributionItemNum.Diagnosis = response.data.Diagnosis; //每天诊断类用品的数量（数组）
            this.distributionItemNum.Others = response.data.Others; //每天其它用品的数量（数组）
          }
        })
        .catch((error) => {
          this.$message({
            message: "获取表格信息失败",
            type: "error",
          });
          console.error(error);
        });
    },

    dateformat(date) {
      // 把标准时间转换为字符串类型
      // var y = date.getFullYear();
      // var m = date.getMonth() + 1;
      // m = m < 10 ? "0" + m : m;
      // var d = date.getDate();
      // d = d < 10 ? "0" + d : d;
      // var Time = y + "-" + m + "-" + d;
      // return Time;
      return date.toISOString().substring(0, 10);
    },

    dateArray(start, end) {
      // console.log(start + ' ' + end);
      const startDate = new Date(start);
      const endDate = new Date(end);
      const oneDay = 3600 * 1000 * 24;
      const range = (endDate - startDate) / oneDay;
      let result = [];
      for (let i = 0; i <= range; i++) {
        result.push(
          new Date(startDate.getTime() + i * oneDay)
            .toISOString()
            .substring(0, 10)
        );
      }
      // console.log(result);
      return result;
    },
  },
  watch: {
    dateRange: function (val) {
      console.log("watch 生效");
      this.startdate = val[0];
      this.enddate = val[1];
      // console.log(this.startdate);
      // console.log(this.enddate);
      if (this.isSearchReceipt) {
        this.SearchDonor();
      } else {
        this.SearchRece();
      }
    },
  },
};
</script>

<style scoped>
.user-search {
  padding-left: 15px;
}
.chart_container {
  text-align: left;
  width: 1500px;
  height: 500px;
}
.title {
  margin: 5px 0 0 15px;
}
</style>